<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Akhilesh Yadav">

    <meta name="description"
        content="Alien Invasion Defense - A thrilling game where you defend Earth from alien invaders with power-ups like health boosts, shields, and speed boosts. Join the ultimate gaming experience!">
    <meta name="keywords"
        content="Alien Invasion Defense, alien shooter game, arcade game, defense game, space invaders, alien attack, online gaming, power-ups, gaming experience">
    <meta name="robots" content="index, follow">

    <meta property="og:title" content="Alien Invasion Defense - Protect Earth from Alien Invaders!">
    <meta property="og:description"
        content="Defend Earth against waves of alien invaders in this action-packed game. Utilize power-ups and upgrade your defenses to survive!">
    <!--     <meta property="og:image" content="https://alienid.netlify.app//og-image.jpg">
    <meta property="og:url" content="https://alienid.netlify.app/alien-invasion-defense"> -->
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Alien Invasion Defense - Protect Earth from Alien Invaders!">
    <meta name="twitter:description"
        content="Defend Earth against waves of alien invaders in this action-packed game. Use power-ups and strategies to survive!">
    <!--     <meta name="twitter:image" content="https://alienid.netlify.app/twitter-image.jpg"> -->

    <link rel="icon" href="favicon.png" type="image/x-icon">
    <title>Alien Invasion Defense</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="Alien.css">
    
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">


    <link rel="manifest" href="/manifest.json">

    <!-- <link rel="stylesheet" href="rules.css" /> -->
    <audio id="backgroundMusic" src="background-music.wav" loop></audio>
    <audio id="hitSound" src="hit-sound.wav"></audio>
    <audio id="gameOverSound" src="gameOver.wav"></audio>
    <audio id="shieldSound" src="shield.wav"></audio>
    <audio id="healthBoostSound" src="health-boost-sound.m4a"></audio>
    <audio id="speedBoostSound" src="speed-boost.m4a"></audio>
    <audio id="shieldSound" src="shield.m4a"></audio>
    <audio id="congratsSound" src="congrats.wav"></audio>

    <style>
        body {


            font-family: Arial, sans-serif;
        }



        /* Styling the progress bar */
        .progress-bar-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 99999;
            height: 4px;
        }

        #progress-bar {
            border: none;
            border-radius: 2rem;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg,
                    cyan,
                    #bbdefb,
                    #1694db,
                    #5c6bc0,
                    #2751bd,
                    #283593,
                    #a402c4,
                    #F72585);
            box-shadow: 0 0 5px #bbdefb, 0 0 13px #283593, 0 0 21px #F72585;
        }

        /* Popup Styles */
        .popup {

            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            background-color: rgba(0, 0, 0, 0.5);
            /* Black background with opacity */
            justify-content: center;
            /* Center the popup */
            align-items: center;
            /* Center the popup */
            z-index: 1000;
            /* Sit on top */

        }


        .popup-content {

            background: linear-gradient(rgb(3 0 28 / 80%), rgb(0 2 55 / 80%)), url(your-image-url.jpg);
            padding: 20px;
            border-radius: 5px;
            max-width: 300px;
            text-align: center;

        }


        /* Set poll options to stack vertically */
        #pollOptions {

            display: flex;
            flex-direction: column;
            /* Stack buttons vertically */
            align-items: center;
            /* Center the buttons */

        }

        .poll-button {

            display: block;
            /* Change to block for full-width */
            margin: 5px 0;
            /* Add vertical margin */
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            /* Green */
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%;
            /* Full width */

        }

        .poll-button:hover {

            background-color: #45a049;
            /* Darker green */

        }

        .poll-button.selected {

            background-color: #2196F3;
            /* Blue for selected */

        }

        /* New Vote Button Styles */
        .vote-button {

            display: block;
            /* Change to block for full-width */
            margin: 5px 0;
            /* Add vertical margin */
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            background-color: #f44336;
            /* Red */
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%;
            /* Full width */

        }

        .vote-button:hover {

            background-color: #d32f2f;
            /* Darker red */

        }

        .uppercase {

            text-transform: uppercase;
            font-size: 15px;

        }


        #levelSelect {
            background-color: transparent;
            color: var(--primary-color-dark);
            border: 2px solid var(--primary-color-dark);
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 14px;
            outline: none;
            cursor: pointer;
            transition: border-color 0.3s;
        }

        #levelSelect:hover,
        #levelSelect:focus {
            border-color: #00aaff;
        }

        #levelSelect option {
            background-color: var(--card-bg-dark);
            color: var(--primary-color-dark);
        }


        .popup-nl {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            z-index: 1009;
        }

        .popup-content-nl {
            display: flex;
            background-color: white;
            border-radius: 10px;
            max-width: 800px;
            height: 450px;
            width: 700px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }

        .close1-btn-nl {
            width: 20px;
            cursor: pointer;
            margin: 18px 10px;
            position: absolute;
            top: -4px;
            right: 12px;
            font-size: 20px;
            font-weight: 800;
            text-decoration: none;
        }

        .popup-left-nl img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .popup-right-nl {
            padding: 20px;
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .popup-nl h1 {
            font-size: 24px;
            background: linear-gradient(to right, #405cac, #5ad4dc, #0058ff);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            text-align: center;
            margin-bottom: 12px;
            margin-top: 35px;
        }

        .h2-nl {
            font-size: 18px;
            margin-bottom: 8px;
            text-align: center;
            color: #333;
        }

        .pop_up-nl {
            margin-bottom: 15px;
            font-weight: bold;
            background: -webkit-linear-gradient(left, #6cc7a9, #e476f9, #ff734e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 12.7px;

        }

        .bold {
            font-size: 13.1px;
        }

        input[type="email"] {
            width: 93%;
            padding: 10px;
            margin-bottom: 16px;
            border: 1px solid #000000;
            border-radius: 5px;
            font-size: 14px;
        }

        .signup-btn1-nl {
            width: 100%;
            text-align: center;
            background: linear-gradient(to right, #1d8afb, #a0cfff, #1d8afb);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .signup-btn1-nl:hover {
            background-color: #4682B4;
        }

        .no-thanks-nl {
            display: block;
            margin-top: 10px;
            color: #888;
            text-decoration: none;
            margin-bottom: 15px;
        }

        .no-thanks-nl:hover {
            color: #000000;
            font-size: 14px;
        }

        .terms-nl {
            margin-top: 15px;
            font-size: 10px;
            color: #888;
        }

        .terms-nl a {
            display: inline;
        }

        .terms-nl a:hover {
            text-decoration: underline;
        }

        .popup-right-nl p {
            margin-top: 0;
            margin-bottom: 10px;
            text-align: center;
        }


        /* Medium screens (481px to 768px) */
        @media (min-width: 481px) and (max-width: 768px) {
            #gameCanvas {
                height: 450px;
                /* 4:3 aspect ratio */
                width: 600px;
                /* 4:3 aspect ratio */
            }
        }
        @media (max-width: 768px){
            .logoImage{
                height: 65px;
            }
        }

        /* Small screens (up to 480px) */
        @media (max-width: 480px) {
            #gameCanvas {
                height: 240px;
                /* 4:3 aspect ratio */
                width: 100%;
                /* 4:3 aspect ratio */
            }
        }

        .logoImage {
            height: 80px;
            /* Adjust to fit the header */
            width: auto;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s, filter 0.3s;
        }

        .logoImage:hover {
            transform: scale(1.15);
            box-shadow: 0 0 15px rgba(0, 0, 255, 0.7);
            /* More prominent blue glow */
            filter: brightness(1.2);
            background-color: rgba(0, 0, 255, 0.1);
            /* Subtle blue background */
            border-radius: 5px;
            /* Rounded edges for a smoother look */
        }
        .social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.0rem;
    height: 2.0rem;
    background-color: transparent;
    border: 0.2rem solid #0000ffb3;
    font-size: 1.1rem;
    border-radius: 50%;
    margin: 1.5rem 0.5rem 1.5rem 0;
    transition: 0.3s ease;
    color: rgba(0, 0, 255, 0.7);
    text-decoration: none;
}

.social-icons a:hover {
    color: black;
    transform: scale(1.3) translateY(-5px);
    background-color:rgba(95, 95, 219, 0.7);
    box-shadow: 0 0 25px rgba(83, 83, 229, 0.7);
}
    </style>
     <!-- on scroll progress bar -->
    <div class="progress-bar-container">
      <div class="progress-bar" id="progress-bar"></div>
    </div>

    <div id="popup-nl" class="popup-nl">
        <div class="popup-content-nl">
            <div class="popup-left-nl">
                <img src="popup.jpg" alt="finance">
            </div>

            <div class="popup-right-nl">
                <a href="# " class="close1-btn-nl close-nl">&times;</a>
                <h1>Unlock the Ultimate Gaming Experience!</h1>
                <h2 class="h2-nl">Sign up to enjoy the ultimate gaming experience</h2>
                <p class="pop_up-nl">Best of luck, Adventurer!</p>
                <form id="emailForm-nl">
                    <input type="email" id="email-nl" placeholder="Enter your email" required>
                    <button type="submit" class="signup-btn1-nl">Subscribe</button>
                </form>
                <a href="#" class="no-thanks-nl close-nl">No thanks</a>
                <p class="terms-nl" style="white-space: nowrap;">By subscribing to newsletters, you agree to our <br><a
                        href="terms&cond.html">Terms of Service</a> and <a href="privacynotice.html">Privacy Policy</a>.
                </p>
            </div>
        </div>
    </div>
    <script src="popup.js"></script>


    <!-- Poll Pop-up -->
    <div class="popup" id="pollPopup">
        <div class="popup-content">

            <h2 class="uppercase">What power-up do you find most helpful?</h2>

            <div id="pollOptions">
                <button class="poll-button" data-value="Health Boost">Health Boost - Restores health during
                    gameplay.</button>
                <button class="poll-button" data-value="Speed Boost">Speed Boost - Enhances your movement speed to evade
                    obstacles.</button>
                <button class="poll-button" data-value="Shield">Shield - Offers temporary protection against enemy
                    attacks.</button>

                <!-- Additional buttons (hidden) -->
                <button class="poll-button hidden" style="display: none;" data-value="Option4">Option4</button>
                <button class="poll-button hidden" style="display: none;" data-value="Option5">Option5</button>

            </div>

            <button id="voteButton" class="vote-button">Vote</button>
            <p id="result"></p>

        </div>
    </div>

    <script>
      
      window.onscroll = function () {
          const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
          const scrollPosition = window.pageYOffset;
          const scrollPercentage = (scrollPosition / totalHeight) * 100;
          document.getElementById(
            "progress-bar"
          ).style.width = `${scrollPercentage}%`;
        };


        // Show the newsletter popup immediately on page load
        function displayNewsletterPopup() {
            document.getElementById('popup-nl').style.display = 'flex'; // Show newsletter
        }
        displayNewsletterPopup(); // Call the function

        // Check if the user has already voted in this session
        const hasVoted = sessionStorage.getItem('hasVoted');

        // Show the poll popup after a delay, only if the user hasn't voted
        function checkAndDisplayPollPopup() {
            const newsletterPopup = document.getElementById('popup-nl');
            if (newsletterPopup.style.display !== 'flex' && !hasVoted) {
                document.getElementById('pollPopup').style.display = 'flex'; // Show poll
            }
        }


        // Set timeout for poll display
        setTimeout(checkAndDisplayPollPopup, 10000);


        // Manage user selections and votes
        const pollButtons = document.querySelectorAll('.poll-button[data-value]');
        let selectedValue = '';

        // Handle clicks on poll buttons
        pollButtons.forEach(button => {
            button.addEventListener('click', function () {
                pollButtons.forEach(btn => btn.classList.remove('selected')); // Clear previous selections
                button.classList.add('selected'); // Highlight selected button
                selectedValue = button.getAttribute('data-value'); // Store selected value
            });
        });

        // Handle voting process
        document.getElementById('voteButton').addEventListener('click', function () {
            if (selectedValue) {
                document.getElementById('result').innerHTML = `You voted for: ${selectedValue}<br>Thank you!`; // Show result
                sessionStorage.setItem('hasVoted', 'true'); // Save voting status
                setTimeout(() => {
                    document.getElementById('pollPopup').style.display = 'none'; // Hide poll
                }, 2000);
            } else {
                alert("Please select an option!"); // Alert if no option is selected
            }
        });

        // Close popups function
        function closePopups() {
            document.getElementById('popup-nl').style.display = 'none'; // Hide newsletter popup
        }

        // Attach close event to close buttons
        document.querySelectorAll('.close-nl').forEach(btn => {
            btn.addEventListener('click', closePopups);
        });

        // Function to log the voting action
        function logVoteAction() {
            console.log("User has voted for: " + selectedValue); // Log selected value
        }

        // Event listener for the vote button to log action
        document.getElementById('voteButton').addEventListener('click', logVoteAction);

        // Function to manage button focus for accessibility
        function handleFocus(event) {
            event.target.style.border = '2px solid #0058ff'; // Optional highlight effect
        }

        // Attach focus event for accessibility improvement
        pollButtons.forEach(button => {
            button.addEventListener('focus', handleFocus);
        });

        // Function to remove focus style
        function handleBlur(event) {
            event.target.style.border = ''; // Remove highlight effect
        }

        // Attach blur event for accessibility improvement
        pollButtons.forEach(button => {
            button.addEventListener('blur', handleBlur);
        });

        // Log when the script has loaded
        console.log("Poll script initialized and ready!");

    </script>

</head>

<body>

    <nav class="navbar">
        <div class="title5">
            <a href="index.html" class="home">
       <img src="./assets/images/alien.png" alt="Game Logo" class="logoImage">
            </a>

        </div>
        <!-- <div class="nav-links">
            <a href="index.html">Home</a>
            <a href="about-us.html">About</a>
            <a href="privacy.html">Privacy</a>
            <a href="Blog_page.html">Blogs</a>
            <a href="Faq.html">FAQ</a>
            <a href="contributors.html">Contributors</a>
            <a href="testimonial.html">Testimonial</a>
            <a href="auth.html">Login</a>
        </div>
        <div class="toggle-container aos-init aos-animate" data-aos="fade-down">
            <input id="themeToggle" class="toggle" type="checkbox">
        </div> -->

        <div id="faqbtn">
            <a href="./donation_page.html">
                <button class="faq-btn">Donate</button>
            </a>
        </div>
        <div id="faqbtn">
            <a href="./share_score.html">
                <button class="faq-btn">Share Score</button>
            </a>
        </div>
        <div id="faqbtn">
            <a href="./Contributors/contributor.html">
                <button class="faq-btn">Contributors</button>
            </a>
        </div>
        <div id="faqbtn">
            <a href="./Login_and_Signup/index.html">
                <button class="faq-btn">Login</button>
            </a>
        </div>
    
        <div class="theme-switch-wrapper">
            <label class="theme-switch" for="checkbox">
                <input type="checkbox" id="checkbox">
                <div class="slider"></div>
            </label>

            <span id="mode-label">Light Mode</span>
        </div>
    </nav>
    <div class="gtranslate_wrapper"></div>
    <div id="gameControls" class="header">
        <div class="controlGroup">
            <label for="levelSelect" id="difficulty">Select Difficulty:</label>
            <select id="levelSelect">
                <option value="easy">Easy</option>
                <option value="medium" selected>Medium</option>
                <option value="hard">Hard</option>
            </select>
        </div>

        <!-- Player name displayed here -->
        <div class="controlGroup">
            <span id="displayName" class="playerName"></span>
        </div>
        <button id="pauseBtn" style="transform: translate(0px, 0px);">Pause</button>
        <div class="controlGroup">
            <button id="startButton"><i class="fas fa-play" style="transform: translate(0px, 0px);" ></i> Start Game</button>
            <button id="pauseButton" style="display: none"><i class="fas fa-play"></i> Game paused</button>
            <button id="restartButton" style="display: none"><i class="fas fa-redo"></i> Play Again </button>
        </div>

    </div>
    <div id="gameContainer">
        <canvas id="gameCanvas"></canvas>

        <div class="gameProgress">
            <div id="warningMessage" class="hidden">Only 1 life remaining!</div>



            <button id="restartButton" style="display: none;">Restart</button>

        </div>
        <div id="nextLevelMessage" class="hidden"></div>


    </div>
    <!-- Control buttons for mobile -->
    <div class="controls" style="margin-bottom: 3vh;">
        <button id="leftButton">←</button>
        <button id="fireButton">🔫</button>
        <button id="rightButton">→</button>
    </div>
    <!-- Congratulatory Popup -->
    <div id="congratsPopup" style="display: none;">
        <div class="popupContent">
          <h2>Congratulations!</h2>
          <p>You've beat your high score!</p>
          <p>Your new high score is: <span id="newHighScore"></span></p>
          <br>
          <div id="faqbtn">
            <a href="./share_score.html">
                <button class="faq-btn">Share Score</button>
            </a>
        </div>
        <br><br>
          <button id="closePopupBtn">Close</button>
        </div>
      </div>
      
  

    <header>


        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>



        <div id="header">
            <div class="hamburger-icon" onclick="toggleSidebar()">
                <i class="fas fa-bars"></i>
            </div>
            <div class="sidebar" id="sidebar">
                <div id="highScore">
                    High Score: <span id="highScoreValue"></span>
                </div>
                <div id="liveScore ">LIVE SCORE: <span id="score">0</span></div>
                <div id="liveLife">LIVE LIFE: <span id="lives">3</span></div>

                <!-- Profile Icon -->
                
                    <a href="./profile.html" class="profile-link" style="display: flex; align-items: center; text-decoration: none;">
                        <img id="homeProfileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" 
                            alt="Profile Icon" 
                            style="width: 50px; height: 50px; border-radius: 50%; margin-top: -57px; margin-left: 220px;">
                    </a>
                </li>
                <div id="gameInfo">
                    <i class="fas fa-star"></i> <span id="score">0</span> |
                    <i class="fas fa-level-up-alt"></i> <span id="level">1</span> |
                    <i class="fas fa-heart"></i> <span id="lives">3</span>
                    <span id="healthBoostTimer"></span>
                    <span id="speedBoostTimer"></span>
                    <span id="shieldTimer"></span>
                </div>

                <div id="instructions">

                    <div>
                        <div id="volumeControl">
                            <div id="muteControl">
                                <button id="muteButton" class="styled-button"
                                    style=" display: flex;    align-items: center;">
                                    <i class="fas fa-volume-up" style="margin-right: 8px;"></i>
                                    <p id="musicVolumeText">Music Volume</p>

                                </button>
                            </div>
                            <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.5">
                        </div>

                    </div>


                    <h2 class="primary-btn" id="instructionsTitle">Player Instructions</h2>
                    <div id="instructionsList">
                        <p><i class="fas fa-arrow-left"></i> Use Left/Right Arrow keys or swipe to move</p>
                        <p><i class="fas fa-bolt"></i> Tap or press Spacebar to shoot</p>
                        <p><i class="fas fa-fighter-jet"></i> Destroy red alien ships</p>
                        <p><i class="fas fa-shield-alt"></i> Avoid aliens reaching the bottom</p>
                        <p><i class="fas fa-clock"></i> Survive as long as possible!</p>
                        <p><i class="fas fa-plus-circle"></i> Collect Health Boost power-ups</p>
                        <p><i class="fas fa-tachometer-alt"></i> Collect Speed Boost power-ups</p>
                        <p><i class="fas fa-shield-alt"></i> Collect Shield power-ups</p>
                        <p><i class="fas fa-shield-alt"></i><a href="./rules.html">explore more</a></p>
                    </div>
                </div>


                <div class="visitor-counter">
                    <span class="icon">👁️</span> <!-- You can replace this with an eye icon image if you prefer -->
                    <span id="visitorCount">Visitors Count:</span>
                    <span class="website-counter">0</span>

                </div>

                <script>
                    
                    document.addEventListener("DOMContentLoaded", function() {
                    // Retrieve the saved avatar from localStorage
                    const savedAvatar = localStorage.getItem("selectedAvatar");

                    // If an avatar is saved, update the profile image
                    if (savedAvatar) {
                        const homeProfileImage = document.getElementById("homeProfileImage");
                        if (homeProfileImage) {
                            homeProfileImage.src = savedAvatar;
                        }
                    }
                });

                </script>

                <style>
                    .profile-icon {

                        border-radius: 50%;
                        margin-left: 230px;
                        margin-top: -35px;

                    }

                    .dropdown-menu {

                        display: none;
                        position: absolute;
                        top: 35px;
                        /* Adjust based on the height of your navbar */
                        right: 0;
                        background-color: white;
                        color: black;
                        border: 1px solid #ccc;
                        border-radius: 4px;
                        z-index: 1;

                    }

                    .dropdown-menu a {

                        display: block;
                        padding: 10px 15px;
                        text-decoration: none;

                    }

                    .dropdown-menu a:hover {

                        background-color: #f1f1f1;

                    }
                </style>

                <script>
                    function toggleMenu() {
                        const menu = document.getElementById('profileMenu');
                        menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
                    }

                    // Close the dropdown if the user clicks outside of it
                    window.onclick = function (event) {
                        if (!event.target.matches('.profile-icon img')) {
                            const menu = document.getElementById('profileMenu');
                            if (menu.style.display === 'block') {
                                menu.style.display = 'none';
                            }
                        }
                    }
                </script>

                <style>
                    .visitor-counter {
                        background-color: #ffffff00;
                        color: #1d4ed8;
                        /* top: auto; */
                        padding: 10px 20px;
                        border-radius: 20px;
                        display: inline-flex;
                        align-items: center;
                        font-family: Arial, sans-serif;
                        margin-left: auto;
                        border: 2px solid;
                        margin-bottom: 30px;

                    }

                    body.dark-mode .visitor-counter {
                        background-color: #33333300;
                        color: #00d0ff;
                        border: 2px solid
                    }

                    .visitor-counter .icon {
                        margin-right: 10px;
                    }
                </style>

                <script>
                    // Function to get the count from localStorage or initialize it
                    function getVisitorCount() {
                        return localStorage.getItem('visitorCount') || 0;
                    }

                    // Function to increment and save the count
                    function incrementVisitorCount() {
                        if (!localStorage.getItem('visitedHomePage')) {
                            let count = parseInt(getVisitorCount()) + 1;
                            localStorage.setItem('visitorCount', count);
                            localStorage.setItem('visitedHomePage', 'true');
                            return count;
                        }

                        return getVisitorCount();
                    }

                    // Function to display the count
                    function displayVisitorCount() {
                        const counterElement = document.querySelector('.website-counter');
                        const count = incrementVisitorCount();
                        counterElement.textContent = count;
                    }

                    // Call the display function when the page loads
                    document.addEventListener('DOMContentLoaded', displayVisitorCount);


                    // Function to display the count
                    function displayVisitorCount() {
                        const counterElement = document.querySelector('.website-counter');
                        const count = incrementVisitorCount();
                        counterElement.textContent = count;
                    }

                    // Call the display function when the page loads
                    document.addEventListener('DOMContentLoaded', displayVisitorCount);


                </script>



            </div>
            <div id="message">
                <i class="fas fa-exclamation-circle"></i> Shield Active<br /></span>
            </div>
            <div id="gameOver">
                <i class="fas fa-exclamation-circle"></i> Game Over<br /><span id="finalScore"></span>
            </div>



            

            <!-- <div id="gameControls" class="button-container">
                <div id="faqbtn">
                    <a href="FAQs.html">
                        <button class="faq-btn">FAQs</button>
                    </a>
                </div>

                <button class="feedback-button" onclick="window.location.href='feedback.html'">Feedback</button>


                <button class="primary-btn" id="signupButton" window.location.href="/Login and Signup/index.html">
                    Signup/Register
                </button>


                <h2 class="primary-btn" id="logoutButton" style="display: none;">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </h2>

                <div id="faqbtn">
                    <a href="welcometestimonials.html">
                        <button class="faq-btn">Testimonials</button>
                    </a>
                </div>

                <button class="feedback-button" onclick="window.location.href='donation_page.html'">Donate</button>

                <div id="privacybtn">
                    <a href="privacy_policy.html">
                        <button class="priacy">Privacy Policy</button>
                    </a>
                </div>    
                <div id="sharescorebtn">
                    <a href="share_score.html">
                            <button class="scoresh">Share High Score</button>
                    </a>    
                </div>
            </div> -->




            <script src="Alien.js"></script>
            <script src="darkMode.js"></script>

        </div>

        <script>
            // Display player's name from local storage
            document.addEventListener("DOMContentLoaded", () => {
                // Retrieve the stored JSON string and parse it back to an object
                let personData = localStorage.getItem("signupData");

                const signupButton = document.getElementById('signupButton'); //Signup button Id
                const logoutButton = document.getElementById('logoutButton'); //logout button Id
                // Check if person data exists
                if (personData) {
                    // Parse the JSON string to an object
                    const person = JSON.parse(personData);
                    // Get the name from the person object
                    const name = person.fullName;
                    document.getElementById(
                        "displayName"
                    ).textContent = `best of luck, ${name}!`;
                    signupButton.style.display = 'none';
                    logoutButton.style.display = 'block';
                } else {
                    // If no data is found, use default
                    const defaultName = "Adventurer";
                    document.getElementById(
                        "displayName"
                    ).textContent = `best of luck, ${defaultName}!`;
                    signupButton.style.display = 'block';
                    logoutButton.style.display = 'none';
                }

                logoutButton.addEventListener('click', () => {
                    // Clear the signup data from localStorage
                    localStorage.removeItem("signupData");

                    // Refresh the page or update the display accordingly
                    location.reload(); // Reloads the page to reflect changes
                });
            });
            // Level selection handling
            // Mute/Unmute
            const muteButton = document.getElementById('muteButton');

            muteButton.addEventListener('click', () => {
                if (backgroundMusic.muted) {
                    backgroundMusic.muted = false;
                    muteButton.innerHTML = '<i class="fas fa-volume-mute"></i> Mute';
                } else {
                    backgroundMusic.muted = true;
                    muteButton.innerHTML = '<i class="fas fa-volume-up"></i> Unmute';
                }

                // Add event listener for the restart button
                document.getElementById("restartButton").addEventListener("click", () => {
                    // Call the restartGame function (assuming it's defined in Alien.js)
                    if (typeof restartGame === "function") {
                        restartGame();
                    } else {
                        console.error("restartGame function is not defined");
                    }
                });
            });
        </script>

        <script>
            // JavaScript to handle level selection

            const startBtn = document.getElementById('startButton');
            const levelSel = document.getElementById('levelSelect');

            startBtn.addEventListener('click', () => {
                const selectedLevel = levelSel.value;
                console.log('Game starting at level:', selectedLevel);
                startGame(selectedLevel);
            });

            function startGame(level) {
                switch (level) {
                    case 'easy':
                        console.log('Easy mode');
                        break;
                    case 'medium':
                        console.log('Medium mode');
                        break;
                    case 'hard':
                        console.log('Hard mode');
                        break;
                    default:
                        console.log('Unknown level');
                }
            }
        </script>

        <script>
            const coords = { x: 0, y: 0 };
            const circles = document.querySelectorAll(".circle");


            // Assign initial colors to the circles
            circles.forEach(function (circle) {
                circle.x = 0;
                circle.y = 0;

            });

            window.addEventListener("mousemove", function (e) {
                coords.x = e.clientX;
                coords.y = e.clientY;

            });

            function animateCircles() {
                let x = coords.x;
                let y = coords.y;

                circles.forEach(function (circle, index) {
                    circle.style.left = x - 12 + "px";
                    circle.style.top = y - 12 + "px";
                    circle.style.scale = (circles.length - index) / circles.length;

                    circle.x = x;
                    circle.y = y;

                    const nextCircle = circles[index + 1] || circles[0];
                    x += (nextCircle.x - x) * 0.3;
                    y += (nextCircle.y - y) * 0.3;
                });

                requestAnimationFrame(animateCircles);
            }

            animateCircles();
        </script>
        <script>
            window.embeddedChatbotConfig = {
                chatbotId: "W_g3OYohwvFoV5lha0KUf",
                domain: "www.chatbase.co"
            }
        </script>
        <script src="https://www.chatbase.co/embed.min.js" chatbotId="W_g3OYohwvFoV5lha0KUf" domain="www.chatbase.co"
            defer>
            </script>

        <div class="gtranslate_wrapper"></div>
        <script>window.gtranslateSettings = { "default_language": "en", "native_language_names": true, "languages": ["en", "fr", "de", "it", "es", "pl", "hi"], "wrapper_selector": ".gtranslate_wrapper", "alt_flags": { "en": "usa" } }</script>
        <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
            integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
            integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>// GSAP animation for popup appearance
            function showPopup() {
                gsap.fromTo(
                    "#popup-nl",
                    { opacity: 0, scale: 0.5 },
                    { opacity: 1, scale: 1, duration: 1, ease: "power2.out" }
                );
            }

            // Animation for popup closing and triggering main content animations
            document.querySelectorAll('.close-nl').forEach(button => {
                button.addEventListener("click", () => {
                    gsap.to("#popup-nl", {
                        opacity: 0,
                        scale: 0.5,
                        duration: 0.5,
                        ease: "power2.in",
                        onComplete: animateMainContent  // Trigger main content animations after popup closes
                    });
                });
            });

            // Main content animations function
            function animateMainContent() {
                // Slide down game controls
                gsap.from("#gameControls", { y: -100, opacity: 0, duration: 1, ease: "power2.out" });

                // Slide in game container from the left
                gsap.from("#gameContainer", { x: -200, opacity: 0, duration: 1, delay: 0.5, ease: "power2.out" });

                // Staggered animation for snowflake elements
                gsap.from(".snowflake", {
                    y: -100,
                    opacity: 0,
                    duration: 1,
                    delay: 1,
                    stagger: 0.1,
                    ease: "power2.out"
                });

                // Fade in header
                gsap.from("#header", { opacity: 0, duration: 1.5, delay: 1.5, ease: "power2.out" });

                // Sequential animations for interactive buttons and controls
                gsap.from("#startButton", { x: -50, duration: 0.8, delay: 2, ease: "elastic.out" });
                gsap.from("#pauseBtn", { x: -50, duration: 1, delay: 2.5, ease: "back.out" });
                gsap.from("#levelSelect", { x: 50, opacity: 0, duration: 1, delay: 3, ease: "back.out" });

                // Staggered poll button animations
                gsap.from(".poll-button", {
                    y: 50,
                    opacity: 0,
                    duration: 1,
                    delay: 3.5,
                    ease: "back.out",
                    stagger: 0.2
                });
            }

            // Call the function to show popup initially
            showPopup();
        </script>


        <script>

            document.addEventListener("DOMContentLoaded", function () {
                const coords = { x: 0, y: 0 };
                const circles = document.querySelectorAll(".circle");

                circles.forEach(function (circle) {
                    circle.x = 0;
                    circle.y = 0;
                });

                window.addEventListener("mousemove", function (e) {
                    coords.x = e.pageX;
                    coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
                });

                function animateCircles() {
                    let x = coords.x;
                    let y = coords.y;

                    circles.forEach(function (circle, index) {
                        circle.style.left = `${x - 12}px`; // Backticks added for template literals
                        circle.style.top = `${y - 12}px`;  // Backticks added for template literals
                        circle.style.transform = `scale(${(circles.length - index) / circles.length})`; // Backticks added for template literals

                        const nextCircle = circles[index + 1] || circles[0];
                        circle.x = x;
                        circle.y = y;

                        x += (nextCircle.x - x) * 0.3;
                        y += (nextCircle.y - y) * 0.3;
                    });

                    requestAnimationFrame(animateCircles);
                }

                animateCircles();
            });

        </script>

        </script>
        <script src="scripts.js"></script> <!-- Link to your service worker registration script -->

</body>
<footer class="footer">
    <div class="footer-links">
        <a href="FAQs.html">FAQs</a>
        <a href="privacy_policy.html">Privacy Policy</a>
        <a href="feedback.html">Feedback</a>
        <a href="welcometestimonials.html">Testimonials</a>
        <a href="./Contributors/contributor.html">Contributors</a>
    </div>
    <div class="footer-note">
        &copy; 2024 Alien Invasion Defense. All rights reserved.
    </div>
    <div class="social-icons">
        <a href="#"><i class="fa-brands fa-linkedin"></i></a>
        <a href="#"><i class="fa-brands fa-github"></i></a>
        <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
        <a href="#"><i class="fa-brands fa-instagram"></i></a>
    </div>

</footer>


<script>
    function toggleSidebar() {
        const sidebar = document.getElementById("sidebar");
        sidebar.classList.toggle("active");
    }
</script>

</html>